<template>
	<div class="tools-warp">
		<el-card shadow="hover">
			<div slot="header">
				<div style="width: 400px; display: flex;align-items: center;">
					<el-input v-model="parms.keyword" placeholder="请输入名称" clearable style="margin-right: 10px;"></el-input><el-button
						type="primary" @click="sherchQuer">查询</el-button> <el-button type="success" @click="addcanpus">添加校区</el-button>
				</div>
			</div>
			<el-table :data="tableData" stripe style="width: 100%">
				<el-table-column prop="logo" label="LOGO" align="center" width="100">
					<template slot-scope="scope">
						<el-image style="width: 50px; height: 50px" :src="scope.row.logo" :preview-src-list="srcList">
						</el-image>
					</template>

				</el-table-column>
				<el-table-column prop="name" label="名称" align="center">
				</el-table-column>
				<el-table-column prop="addr" label="地址" align="center">
				</el-table-column>
				<el-table-column prop="phone" label="电话" align="center">
				</el-table-column>
				<el-table-column prop="intro" label="介绍" align="center">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="150" align="center">
					<template slot-scope="scope">
						<el-button @click="endClick(scope.row)" type="primary" size="small">编辑</el-button>
						<el-button @click="handleClick(scope.row)" type="danger" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="padding: 20px 0;">
				<el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</el-card>
		<el-dialog :title="texts" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="校区名称" prop="name">
					<el-input v-model="ruleForm.name" placeholder="请输入校区名称"></el-input>
				</el-form-item>
				<el-form-item label="校区电话" prop="phone">
					<el-input v-model="ruleForm.phone" maxlength="11" placeholder="请输入校区电话"></el-input>
				</el-form-item>
				<el-form-item label="校区地址" prop="addr">
					<el-input v-model="ruleForm.addr" placeholder="请输入校区地址"></el-input>
				</el-form-item>
				<el-form-item label="校区简介" prop="intro">
					<el-input v-model="ruleForm.intro" type="intro" :autosize="{ minRows: 2, maxRows: 4 }"
						placeholder="请输入校区简介"></el-input>
				</el-form-item>
				<el-form-item label="校区LOGO" prop="logo">
					<el-upload class="avatar-uploader" :action="authurl"
						:show-file-list="flsae" :on-success="handleAvatarSuccess" :headers="headers" :before-upload="beforeAvatarUpload">
						<img v-if="logo" :src="logo" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="resetForm('ruleForm')">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { Session } from '@/utils/storage';
import { allAdminApi } from '@/api/allapi';
const adminApi = allAdminApi();
export default {
	name: 'campus',
	data() {
		return {
			logo: '',
			authurl:"https://www.fbty.tech/api/api/accessory/upload",
			input: "",
			dialogVisible: false,
			tableData: [],
			headers:{
				"Authorization": 'bearer ' + `${Session.get('token')}`,
			},
			total: 0,
			ruleForm: {
				name: '',
				phone: '',
				addr: '',
				intro: '',
				logo: '',
			},
			parms: {
				limit: 10,
				page: 1,
				keyword: "",
			},
			texts:"添加校区",
			rules: {
				name: [
					{ required: true, message: '请输入校区名称', trigger: 'change' },
				],
				phone: [
					{ required: true, message: '请输入校区电话', trigger: 'change' },
				],
				addr: [
					{ required: true, message: '请输入校区地址', trigger: 'change' },
				],
				intro: [
					{ required: true, message: '请输入校区地址', trigger: 'change' },
				],
			},
			url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
			srcList: [
				'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
				'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
			]
		};
	},
	mounted() {
		this.sherchList();
	},
	methods: {
		sherchQuer() {
			this.parms.page = 1
			this.sherchList()
		},
		handleCurrentChange(val) {
			this.parms.page = val
			this.sherchList()
		},
		sherchList() {
			adminApi.campusList(this.parms).then((res) => {
				if (res.code == 200) {
					this.tableData = res.result;
					this.total = res.count;
				}
			})
		},
		endClick(row) {
			this.texts = "编辑校区"
			this.ruleForm = row
			this.dialogVisible = true;
		},
		handleClick(row) {
			this.$confirm('此操作将永久删除该校区, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				adminApi.deletecampusinfo(row.id).then((res) => {
					if (res.code == 200) {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.sherchList()
					}
				})

			})
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
			this.dialogVisible = false;
		},
		handleAvatarSuccess(res, file) {
			this.ruleForm.logo = res.result.path
			this.logo = res.result.path;
		},
		beforeAvatarUpload(file) {
			// const isJPG = file.type === 'image/jpeg';
			// const isLt2M = file.size / 1024 / 1024 < 2;

			// if (!isJPG) {
			// 	this.$message.error('上传头像图片只能是 JPG 格式!');
			// }
			// if (!isLt2M) {
			// 	this.$message.error('上传头像图片大小不能超过 2MB!');
			// }
			// return isJPG && isLt2M;
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					adminApi.campusinfoApi(this.ruleForm).then((res) => {
						if (res.code == 200) {
							this.$message.success(res.msg);
							this.$refs[formName].resetFields();
							this.sherchQuer()
							this.dialogVisible = false
						}
					})
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		addcanpus() {
			this.texts = "添加校区"
			this.dialogVisible = true;
		},
	},
};
</script>

<style lang="scss">
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>
